<template>
    <div class="index">
        <div class="top">
        </div>
        <div class="user">
            <div class="one">
            <img :src="userInfoList.avatar" alt="" @click="$router.push('/info')">
            <span v-if="isLogin == false" @click="$router.push('/login')">请登录</span>
            <p v-else>昵称：{{userInfoList.nickname}}</p>
            </div>
            <div class="two">
                <div class="two-item">
                    <span>0</span>
                    <span>我的课程</span>
                    <span>-已购课程学习-</span>
                </div>
                <div class="two-item">
                    <span>0</span>
                    <span>我的预约</span>
                    <span>-一对一老师预约-</span>
                </div>
                <div class="two-item">
                    <span>0</span>
                    <span>剩余学习币</span>
                    <span>-查看剩余学习币-</span>
                </div>
            </div>
        </div>
        <h2 class="kecehng1">课程相关</h2>
        <div class="kecheng">
            <p><img src="/images/paper-package.png" alt=""><span>我的作业</span></p>
            <p><img src="/theme-img/icon_person_teacher.png" alt=""><span @click="$router.push('/concern')">关注的老师</span></p>
            <p><img src="/theme-img/icon_person_collect.png" alt=""><span>我的收藏</span></p>
            <p><img src="/theme-img/icon_person_collect.png" alt=""><span>我的下载</span></p>
        </div>
        <h2 class="kecehng1">订单相关</h2>
        <div class="order">
            <p><img src="/theme-img/icon_person_order.png" alt=""><span>我的订单</span></p>
            <p><img src="/theme-img/icon-enter-hover.png" alt=""><span>收货地址</span></p>
        </div>
        <h2 class="kecehng1">我的账号</h2>
        <div class="my">
            <p><img src="/theme-img/icon_person_coupon.png" alt=""><span>优惠券</span></p>
            <p><img src="/theme-img/icon_person_card.png" alt=""><span>学习卡</span></p>
            <p><img src="/theme-img/icon_person_vip.png" alt=""><span>会员</span></p>
        </div>
        <h2 class="kecehng1">自助服务</h2>
        <div class="fw">
            <p><img src="/theme-img/icon_person_news.png" alt=""><span>我的消息</span></p>
            <p><img src="/theme-img/icon_person_mail.png" alt=""><span>意见反馈</span></p>
            <p><img src="/theme-img/icon_person_custom.png" alt=""><span>在线客服</span></p>
            <p><img src="/theme-img/icon_person_setting.png" alt=""><span style="color:red"
                    @click="$router.push('/options')">设置</span></p>
        </div>

    <navBottom></navBottom>
    </div>
</template>

<script>
import { getUserInfo } from "../../http/login"
export default {

    data() {
        return {
            userInfoList: {
                avatar: "/images/avatar.png"
            },
            isLogin: false
        };
    },

    mounted() {
        this.getUserInfoList();
    },

    methods: {
        async getUserInfoList() {
            const res = await getUserInfo();
            console.log(res);
            if (res.code == 200) {
                this.userInfoList = res.data;
                this.isLogin = true
            } else {
                this.isLogin = false;
            }

        }
    },
};
</script>

<style lang="scss" scoped>
.top {
    width: 100vw;
    height: 120px;
    background: url(/theme-img/user_bg.png)0 0 /100% no-repeat ;
}

.user {
    margin-top: -50px;
    margin-left: 40px;
    width: 80vw;
    height: 130px;
    box-shadow: 1px 1px 4px #888888;
    background: #fff;
    z-index: 1;
    .one {
        display: flex;
        flex-direction: row;
        align-items: center;
        font-size: 13px;
        margin: 15px;
        img {
            margin-top: 10px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 20px;
        }
    }

    .two {
        display: flex;
        align-items: center;
        justify-content: space-around;

        .two-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            text-align: center;

            span:nth-child(1) {
                color: orange;
                font-size: 14px;
            }

            span:nth-child(2) {
                font-size: 12px;
            }

            span:nth-child(3) {
                font-size: 10px;
                color: #999;
            }
        }
    }

}

.kecheng {
    width: 80vw;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: space-around;

    p {
        flex: 1;
        display: flex;
        align-items: center;
        flex-direction: column;

        img {
            display: inline-block;
            width: 15px;
            height: 15px;
        }
    }
}

.order {
    width: 40vw;
    margin-left: 10vw;
    display: flex;
    flex-direction: row;
    justify-content: space-around;

    p {
        flex: 1;
        display: flex;
        align-items: center;
        flex-direction: column;

        img {
            display: inline-block;
            width: 15px;
            height: 15px;
        }
    }
}

.my {
    width: 60vw;
    margin-left: 10vw;
    display: flex;
    flex-direction: row;
    justify-content: space-around;

    p {
        flex: 1;
        display: flex;
        align-items: center;
        flex-direction: column;

        img {
            display: inline-block;
            width: 15px;
            height: 15px;
        }
    }
}

.fw {
    width: 80vw;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: space-around;

    p {
        flex: 1;
        display: flex;
        align-items: center;
        flex-direction: column;

        img {
            display: inline-block;
            width: 15px;
            height: 15px;
        }
    }
}

h2{
    width: 80vw;
    margin: 0 auto;
    margin-top: 5px;
    margin-bottom: 5px;
}
</style>
